<!-- 余额明细 -->
<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:calc(100vh - 46px);overflow: auto;">
      <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad" v-if="getList.length>0" :immediate-check="false"
        :offset="10">
        <div class="list" v-for="item in getList" :key="item.id">
          <van-row>
            <van-col span="17" class="dsf">
              <span>{{item.content}}</span>
            </van-col>
            <van-col span="7" class="dsf tar red" style="font-size:.4rem;">
              <span :class="item.amt>0?'green':'red'">{{item.amt>0?'+'+item.amt:item.amt}}</span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="17" class="dsf">
              <p class="gray">{{common.formatDate(item.tradeTime)}}</p>
            </van-col>
            <van-col span="7" class="dsf tar">
              (USDT)
            </van-col>
          </van-row>
        </div>
      </van-list>
      <div v-else class="list_text">{{listText}}</div>
    </van-pull-refresh>

  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      finished: false,  //是否加载完所有数据
      loading: false,  //是否加载完所有数据
      data: {
        pageSize: 10,
        currentPage: 1,
        userId: JSON.parse(localStorage.getItem('userInfo')).id,
      },
      getList: [],
      listText: '',
    }
  },
  methods: {
    onLoad () {      //上拉加载
      setTimeout(() => {
        this.getBalance()
        this.loading = true
        this.data.currentPage++
      }, 500)
    },
    onRefresh () {
      setTimeout(() => {
        this.isLoading = false;
        this.loading = false
        this.finished = false
        this.data.currentPage = 1;
        this.getList = []
        this.getBalance()
        this.$toast('刷新成功');
      }, 500);
    },
    async getBalance () {
      const url = '/balanceLog/queryPage'
      let result = await this.request.mobileRequest('POST', url, this.data)
      if (result.code == 200) {
        this.loading = false
        if (this.data.currentPage === 1) {
          this.getList = result.data.datas
        } else {
          if (result.data.datas != '' && this.data.currentPage > 1) {
            this.getList = this.getList.concat(result.data.datas)
          }
        }
        if (result.data.datas.length < this.data.pageSize) {
          this.finished = true
        }
        if (this.getList.length == 0) {
          this.listText = '暂无数据'
        }
      } else {
        this.$toast({ type: 'fail', message: result.msg })
      }
    }
  },
  mounted () {
    this.getBalance();
  }
}
</script>

<style scoped>
.dsf {
  height: 0.7rem;
  display: flex;
  align-items: center;
}
.list {
  padding: 0.2rem 0.3rem;
  background: #fff;
  border-bottom: 0.01rem solid #d9d9d9;
}
</style>
